<template>
  <div class="Layout">
    <!-- 这是主页面 -->
    <el-container>
      <el-aside width="200px">
        <h5 class="title">鱿鱼娱乐</h5>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#1b1b1b"
          text-color="#59627c"
          router
        >
          <el-menu-item
            index="/home"
            :class="{ active: $route.path === '/home' }"
          >
            <span slot="title">网站首页</span>
          </el-menu-item>
          <el-menu-item
            index="/about"
            :class="{ active: $route.path == '/about' }"
          >
            <span slot="title">系统配置</span>
          </el-menu-item>
          <el-menu-item index="3">
            <span slot="title">列表设置</span>
          </el-menu-item>
          <el-menu-item index="4">
            <span slot="title">轮播配置</span>
          </el-menu-item>
          <el-menu-item index="5">
            <span slot="title">地区配置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-row>
            <el-col :span="14">
              <img
                class="headPortrait"
                src="https://img1.baidu.com/it/u=2946362431,2038584214&fm=253&fmt=auto?w=662&h=500"
                alt=""
              /><span>您好，戴公子</span>
            </el-col>
            <el-col :span="10">
              <el-input v-model="input" placeholder="搜素...">
                <i class="el-icon-edit el-input__icon" slot="prefix"> </i>
              </el-input>
              <el-badge :value="12" class="item">
                <i class="el-icon-chat-round"></i>
              </el-badge>
              <i class="el-icon-s-tools"></i>
            </el-col>
          </el-row>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  name: "Layout",
  data() {
    return {
      input: "",
    };
  },
  mounted() {},
  methods: {},
  computed: {},
  watch: {},
};
</script>
<style lang="scss" scoped>
.Layout {
  height: 100%;
  width: 100%;
  .active {
    color: #2aa2b6 !important;
  }
  .el-container {
    height: 100%;
    width: 100%;
  }
  .title {
    height: 60px;
    padding-left: 20px;
    background-color: #0d0d0d;
    color: #fff;
    line-height: 60px;
    font-size: 22px;
    font-weight: 600;
  }
  ::v-deep .el-header {
    height: 60px !important;
    line-height: 60px;
  }
  ::v-deep .el-menu {
    height: calc(100% - 60px);
  }
  ::v-deep .el-menu-item {
    width: 200px !important;
  }
  .headPortrait {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
  }
  ::v-deep .el-col {
    display: flex;
    align-items: center;
  }
  /* 选择框 */
  ::v-deep .el-input__inner {
    border-radius: 20px;
    background-color: #f5f6f8;
  }
  ::v-deep .el-input--prefix {
    width: 400px;
    margin-right: 20px;
  }
  ::v-deep .el-badge__content.is-fixed {
    top: 2px !important;
  }
  ::v-deep .el-icon-chat-round,
  .el-icon-s-tools {
    font-size: 30px;
  }
  ::v-deep .el-badge {
    display: flex;
    align-items: center;
    margin-right: 50px;
  }
  ::v-deep .el-main {
    background-color: #f3f3f3;
  }
}
</style>